<script setup>
    import userimg from '@/assets/4ac8c27cc785ab98fafe8f9e0ee04e3.jpg'
    import { RouterLink, RouterView } from 'vue-router'
    import {onMounted, ref} from 'vue'
    const user = ref("https://vfiles.gtimg.cn/vupload/202005/07_common_avatar.png")

    window.addEventListener('scroll',function(){ 
        document.querySelector('#headerTopaaa').classList.toggle("bian",window.scrollY>0)
    })
    onMounted(() => {
        let cat = localStorage.getItem("userMessage");
        if(cat!='' && cat!=null){
            document.querySelector('.log').hidden = true
            document.querySelector('.mypage').hidden = false
            user.value=userimg
        }else{
            document.querySelector('.log').hidden = false
            document.querySelector('.mypage').hidden = true
            user.value="https://vfiles.gtimg.cn/vupload/202005/07_common_avatar.png"
        }
    })

    function quitUser(){
        document.querySelector('.quit').hidden = !document.querySelector('.quit').hidden
    }
    function quitLog(){
        localStorage.setItem("userMessage", '');
        location.reload()
    }
</script>

<template>
    <header class="header" id="headerTopaaa">
        <div class="title">
            <!-- <img alt="Vue logo" class="xxlogo" src="@/assets/logo.svg" width="30" height="30" /> -->
            <p>芒果tv</p>
        </div>
        <div class="wrapper">
            <nav>
                <RouterLink to="/">首页</RouterLink>
                <RouterLink to="/about">频道</RouterLink>
            </nav>
        </div>
        <div class="user">
            <nav>
                <RouterLink to="/user"><img :src="user" @mouseover="quitUser" @mouseout="quitUser"/></RouterLink>
            </nav>
        </div>
        <div class="search">
            <input type="text" id="searchTxt"  placeholder="搜索">
        </div>
        <div class="quit" hidden  @mouseover="quitUser" @mouseout="quitUser">
            <div class="bgc">
                <nav>
                    <RouterLink to="/user"><p class="log">登录</p></RouterLink>
                    <RouterLink to="/user"><p class="mypage" hidden>个人主页</p></RouterLink>
                </nav>
                <p @click="quitLog">退出登录</p>
            </div>
        </div>   
    </header>
    <RouterView />
</template>


<style scoped>
.quit{
    position: fixed;
    right: 0;
    top: 40px;
    width: 120px;
    height: 110px;
}
.bgc{
    margin-top: 40px;
    width: 100%;
    height: 70px;
    text-align: center;
    line-height: 25px;
    background-color: white;
}
.bian{
    background-color: white;
    color: black;
}
.header {
    position: fixed;
    top:0;
    width: 100%;
    line-height: 1.5;
    height: 80px;
}
.user{
    float: right;
    margin-right: 20px;
    width: 60px;
    height: 60px;
}
.user img{
    width: 40px;
    height: 40px;
    margin-top: 25px;
    border-radius: 50%;
}
.search{
    float: right;
    width: 280px;
    height: 60px;
}
.search input{
    padding-left: 20px;
    margin-top:24px;
    width: 250px;
    height: 38px;
    border-radius: 50px;
    border: 0px;
    background-color: rgb(239, 239, 239);
}
.title{
    float: left;
    width: 200px;
    height: 80px;
    padding-left: 20px;
}
.title img{
    float: left;
    margin-top: 30px;
}
.title p{
    font-size: 26px;
    margin-top: 0px;
    line-height: 80px;
}
.wrapper{
    float: left;
    width: 500px;
    height: 80px;
}
.wrapper nav {
    float: left;
}

.wrapper nav a.router-link-exact-active {
    font-size: 16px;
  color: rgb(255, 89, 0);
  font-weight: bold;
}
.wrapper p{
    /* float: left; */
    font-size: 14px;
    line-height: 53px;
    text-decoration: none;
    display: inline-block;
    padding: 0 1rem;
    color: black;
    font-weight: 700;
}
.wrapper nav a {
    font-size: 14px;
    line-height: 80px;
    text-decoration: none;
    display: inline-block;
    padding: 0 1rem;
    color: black;
    font-weight: 700;
}
</style>
